<template>
    <div class="Follower">
        <ul>
            <!-- 遍历关注列表，点击传参在后再chatStore中维护 -->
            <li 
                @click="sendIdol(f.idol)" 
                v-for="f in followerList" 
                :class="{ 'selected': isSelected(f.idol.id) }"
            >
                <router-link active-class="active" :to="{ name: 'followermsg' }">
                    <div class="follower-item">
                        <el-image :src="f.idol.avatarUrl" class="avatar"></el-image>
                        <div class="follower-info">
                            <div class="follower-name">{{ f.idol.nickname }}</div>
                            <div class="follower-bio" v-if="f.idol.bio">{{ f.idol.bio }}</div>
                        </div>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { useChatStore } from '@/stores/chat'
import axios from 'axios'
import { reactive, ref } from 'vue'

interface idol {
    avatarUrl: string
    bio: string
    fansCount: number
    id: number
    isAdmin:string
    nickname: string
    recipeCount: number
}
interface Follower {
    id: number
    idol: idol
    isBlocked: string
}
let followerList: Follower[] = reactive([])
let selectedFollowerId = ref<number | null>(null)

// 获取关注列表
getFollower()//组件先获取一次关注列表
async function getFollower() {
    const followerAxios = await axios({
        url: '/api/society/getIdolList',
        headers: { 'Content-Type': 'application/json' }
    })
    Object.assign(followerList, followerAxios.data.data)
    console.log('关注列表' + JSON.stringify(followerList[0].idol));
}

// pinia状态管理，将选中的关注对象在chatStore中维护
const chatStore = useChatStore()
function sendIdol(idol:idol){
    chatStore.setCurrentIdol(idol)
    selectedFollowerId.value = idol.id//设置被选中的id
    console.log('发送关注者数据:', idol);
}

// 检查是否选中,选中则高亮
function isSelected(idolId: number): boolean {
    return selectedFollowerId.value === idolId
}
</script>

<style scoped>
/* 食谱网站色调样式 - 微信风格布局 */
.Follower {
    margin-left: 100px;
}

.Follower ul li {
    height: 80px;
    border-bottom: 1px solid #E8D5B7;
    padding: 15px 20px;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #FFFFFF 0%, #FDF8F2 100%);
}
.Follower ul li a {
    display: block;
    height: 100%;
    text-decoration: none;
}
.Follower ul li:hover {
    cursor: pointer;
    background: linear-gradient(135deg, #FFF3E0 0%, #FFECB3 100%);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.1);
    border-left: 4px solid #FF9800;
}
.Follower ul li.active {
    background: linear-gradient(135deg, #FFECB3 0%, #FFE082 100%);
    border-left: 4px solid #FF5722;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
}

/* 微信风格关注者列表布局 */
.follower-item {
    display: flex;
    align-items: center;
    height: 100%;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #FFB74D;
    box-shadow: 0 2px 8px rgba(255, 183, 77, 0.3);
    flex-shrink: 0;
}

.follower-info {
    flex: 1;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.follower-name {
    font-size: 18px;
    font-weight: 600;
    color: #5D4037;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.follower-bio {
    font-size: 14px;
    color: #8D6E63;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

/* 选中状态样式 */
.Follower ul li.selected {
    background: linear-gradient(135deg, #FFECB3 0%, #FFE082 100%);
    border-left: 4px solid #FF5722;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
    transform: translateX(2px);
}
</style>
